<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>i118n</title>

		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/css/font-awesome.min.css" />
		
		<!-- fonts -->
		<link rel="stylesheet" href="../assets/css/ace-fonts.css" />
		
		<link rel="stylesheet" href="../assets/css/daterangepicker.css" />
		
		<link rel="stylesheet" href="../assets/css/ace.min.css" />
		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
		<![endif]-->
	</head>

	<body>
	 <div class="main-container">
	  <div class="page-content">

			<div class="well  bigger-110">
				Most plugins have options to modify messages and texts and for different languages.
				<br />
				Also many plugins have extra language files which is not included with the template.
				<br />
				You can refer to their respective pages to download local files.
				<br />
				Some of them are:
				<ul class="spaced">				  
				  <li>jQuery Validate plugin</li>
				  <li>jQuery Colorbox</li>
				  <li>Select2</li>
				  <li>Most date &amp; time plugins including moment.js</li>
				</ul>
			</div>
	  
			<div class="center" style="width:400px; margin:12px;">
				<h3 class="header blue smaller lighter">
					Example of a French date range picker
				</h3>
				<input type="text" name="daterange" id="id-date-range-picker-1" />
			 </div>
		</div>

	  </div>
	 </div>


		<!-- basic scripts -->
		<!--[if !IE]> -->
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='../assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='../assets/js/jquery1x.min.js'>"+"<"+"/script>");
		</script>
		<![endif]-->
		
		<script src="../assets/js/bootstrap.min.js"></script>
		<script src="../assets/js/date-time/moment.min.js"></script>
		<script src="../assets/js/date-time/daterangepicker.min.js"></script>
				
		<!-- ace scripts -->
		<script type="text/javascript">
			$(function() {
				//localization example for daterang picker
				//change moment.js language to French
				//example taken from: http://momentjs.com/docs/#/i18n/changing-language/
				moment.lang('fr', {
					months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
					monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
					weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
					weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
					weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
					longDateFormat : {
						LT : "HH:mm",
						L : "DD/MM/YYYY",
						LL : "D MMMM YYYY",
						LLL : "D MMMM YYYY LT",
						LLLL : "dddd D MMMM YYYY LT"
					},
					calendar : {
						sameDay: "[Aujourd'hui à] LT",
						nextDay: '[Demain à] LT',
						nextWeek: 'dddd [à] LT',
						lastDay: '[Hier à] LT',
						lastWeek: 'dddd [dernier à] LT',
						sameElse: 'L'
					},
					relativeTime : {
						future : "dans %s",
						past : "il y a %s",
						s : "quelques secondes",
						m : "une minute",
						mm : "%d minutes",
						h : "une heure",
						hh : "%d heures",
						d : "un jour",
						dd : "%d jours",
						M : "un mois",
						MM : "%d mois",
						y : "une année",
						yy : "%d années"
					},
					ordinal : function (number) {
						return number + (number === 1 ? 'er' : 'ème');
					},
					week : {
						dow : 1, // Monday is the first day of the week.
						doy : 4  // The week that contains Jan 4th is the first week of the year.
					}
				});

				//I've translated the following texts using Google Translate, so it may not be correct
				$('#id-date-range-picker-1').daterangepicker({
				  locale : {
					applyLabel: 'Choisir',
					clearLabel: 'Nettoyer',
					fromLabel: 'Dès',
					toLabel: 'Vers',
					weekLabel: 'W',
					customRangeLabel: 'Plage personnalisée',
					daysOfWeek: moment()._lang._weekdaysMin,
					monthNames: moment()._lang._monthsShort,
					firstDay: 0
				  }
				})

				
				
				if(location.protocol == 'file:') alert("For retrieving data from server, you should access this page using a webserver.");
			});
		</script>

	</body>
</html>
